<html>

<head>
    <%- include('./includes/head', { siteTitle: `${post.title} | ${themeConfig.siteName}` }) %>
        <% if (typeof commentSetting !== 'undefined' && commentSetting.showComment) { %>
            <% if (commentSetting.commentPlatform === 'gitalk') { %>
                <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
                <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
                <% } %>

                    <% if (commentSetting.commentPlatform === 'disqus') { %>
                        <link rel="stylesheet" href="https://unpkg.com/disqusjs@1.1/dist/disqusjs.css">
                        <script src="https://unpkg.com/disqusjs@1.1/dist/disqus.js"></script>
                        <% } %>
                            <% } %>
</head>

<body>
    <div class="main">
        <%- include('./includes/header') %>

            <div id="main-content" class="post-detail main-container">
                <!-- left -->
                <div id="content" class="main-container-left">
                    <article class="post i-card">
                        <h2 class="post-title">
                            <%= post.title %>
                        </h2>
                        <div class="post-info">
                            <time class="post-time"><%= post.dateFormat %></time>
                            <% post.tags.forEach(function(tag) { %>
                                <a href="<%= tag.link %>" class="post-tag i-tag
                            i-tag-<%= ['', 'primary', 'success', 'warning', 'info','error','banana','other_1','other_2','other_3','other_4',][Math.floor(Math.random()*11)] %>">
                            #<%= tag.name %>
                        </a>
                                <% }); %>
                        </div>
                        <% if (themeConfig.showFeatureImage && post.feature) { %>
                            <div class="post-feature-image" style="background-image: url('<%= post.feature %>')"></div>
                            <% } %>
                                <div class="post-content">
                                    <%- post.content %>
                                </div>
                    </article>
                    <!--  -->
                    <% if (post.nextPost && !post.hideInList) { %>
                        <div class="next-post">
                            <div class="next">下一篇</div>
                            <a href="<%= post.nextPost.link %>">
                                <h3 class="post-title">
                                    <%= post.nextPost.title %>
                                </h3>
                            </a>
                        </div>
                        <% } %>
                            <div id="disqus_thread"></div>
                            <div id="gitalk-container"></div>
                </div>
                <!-- middle -->
                <div class="main-container-middle"></div>
                <!-- right -->
                <div id="sidebar" class="main-container-right">
                    <% if( post.toc){ %>
                        <!-- toc -->
                        <%- include('./includes/cards/toc-card.ejs') %>
                            <%}else{%>
                                <!-- id-card -->
                                <%- include('./includes/cards/id-card.ejs') %>
                                    <%}%>

                </div>




            </div>


            <%- include('./includes/footer') %>

    </div>
    <script>
        $('#sidebar').stickySidebar({
            topSpacing: 80,
            // bottomSpacing: 60
        });
    </script>
    <% if (typeof commentSetting !== 'undefined' && commentSetting.showComment) { %>
        <% if (commentSetting.commentPlatform === 'gitalk') { %>
            <%- include('./includes/gitalk') %>
                <% } %>

                    <% if (commentSetting.commentPlatform === 'disqus') { %>
                        <%- include('./includes/disqus') %>
                            <% } %>
                                <% } %>
</body>

</html>